<template>
  <div>
    <a-form-model ref="ruleForm" :model="item" v-for="(item, index) in formList" :key="index" :rules="rules">
      <a-row :gutter="20">
        <a-col :span="24" style="display: flex;justify-content: space-between;margin-top: 10px">
          <h3>代理商{{ index + 1 }}</h3>
          <a-button
            v-if="formList.length > 1 && status === 'operate'"
            type="link"
            icon="delete"
            style="color: red"
            @click="handleDelAgent(index)"
            >删除代理商</a-button
          >
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="代理商" prop="agencyName">
            <a-select
              showSearch
              placeholder="请选择代理商姓名"
              v-model="item.agencyName"
              :disabled="status !== 'operate'"
              :filterOption="filterOption"
            >
              <a-select-option v-for="itm in agentList" :key="itm.id" :value="itm.id">{{
                itm.realname
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="二级套餐类型" prop="agencyPackageType">
            <j-dict-select-tag
              v-model="item.agencyPackageType"
              placeholder="请选择二级套餐类型"
              dictCode="package_type"
              :disabled="status !== 'operate'"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="固定电量比例（%）" prop="agencyFixedPowerRatio">
            <a-input-number
              :max="100"
              style="width: 100%;"
              v-model="item.agencyFixedPowerRatio"
              placeholder="请输入固定电量比例"
              :disabled="status !== 'operate'"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="固定电量保底价（厘/KW-h）" prop="agencyFixedBatteryMinimumPrice">
            <a-input
              style="width: 100%;"
              v-model="item.agencyFixedBatteryMinimumPrice"
              placeholder="请输入固定电量保底价"
              :disabled="status !== 'operate'"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="浮动电量保底价（厘/KW-h）" prop="agencyFloatingBatteryMinimumPrice">
            <a-input
              style="width: 100%;"
              v-model="item.agencyFloatingBatteryMinimumPrice"
              placeholder="请输入浮动电量保底价"
              :disabled="status !== 'operate'"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="需求侧响应收益分成比例（%）" prop="agencyResponseRevenueSharingRatio">
            <a-input-number
              :max="100"
              style="width: 100%;"
              v-model="item.agencyResponseRevenueSharingRatio"
              placeholder="请输入需求侧响应收益分成比例"
              :disabled="status !== 'operate'"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="24" v-if="status === 'operate'">
          <div style="text-align: center">
            <a-button type="link" @click="handleAddsalesman" v-if="index === formList.length - 1 && formList.length < 2"
              >+ 新增代理商</a-button
            >
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import { apiGetAgentList } from '@/api/agentManage'

export default {
  name: 'AgentForm',
  props: {
    status: String
  },
  data() {
    return {
      formList: [
        {
          agencyName: undefined,
          agencyPackageType: undefined,
          agencyFixedPowerRatio: undefined,
          agencyFixedBatteryMinimumPrice: undefined,
          agencyFloatingBatteryMinimumPrice: undefined,
          agencyResponseRevenueSharingRatio: undefined
        }
      ],
      agentList: [],
      rules: {
        agencyName: [{ required: true, message: '请选择代理商', trigger: 'change' }],
        agencyPackageType: [{ required: true, message: '请选择二级套餐类型', trigger: 'change' }],
        agencyFixedPowerRatio: [{ required: true, message: '请输入固定电量比例', trigger: 'blur' }],
        agencyFixedBatteryMinimumPrice: [{ required: true, message: '请输入固定电量保底价格', trigger: 'blur' }],
        agencyFloatingBatteryMinimumPrice: [{ required: true, message: '请输入浮动电量保底价格', trigger: 'blur' }],
        agencyResponseRevenueSharingRatio: [{ required: true, message: '请输入需求侧响应收益分成比', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getAgentList()
  },
  methods: {
    filterOption(value, option) {
      return option.componentOptions.children[0].text.indexOf(value) >= 0
    },
    // 获取业务员
    async getAgentList() {
      const { code, result } = await apiGetAgentList()
      if (code === 0) {
        this.agentList = result.records
      }
    },
    // 新增业务员
    handleAddsalesman() {
      this.formList.push({
        agencyName: undefined,
        agencyPackageType: undefined,
        agencyFixedPowerRatio: undefined,
        agencyFixedBatteryMinimumPrice: undefined,
        agencyFloatingBatteryMinimumPrice: undefined,
        agencyResponseRevenueSharingRatio: undefined
      })
    },
    // 删除业务员
    handleDelAgent(index) {
      this.formList.splice(index, 1)
    },
    async validateForm() {
      const promiseRef = this.$refs.ruleForm.map(item => item.validate())
      await Promise.all(promiseRef)
      return this.formList
    }
  }
}
</script>

<style lang="less" scoped></style>
